<template>
    <div id="app" class="container">
        <div class="box">
            <div class="top-box">
                <img src="@/assets/img/p1.png">
                <div class="title">
                    <p>今日新增</p>
                    <p>{{ }}篇</p>
                </div>
            </div>
            <div class="under-box">
                <li>民事文书 {{ }}篇</li>
                <li>赔偿文书 {{ }}篇</li>
            </div>
        </div>
        <div class="box">
            <div class="top-box">
                <img src="@/assets/img/p2.png">
                <div class="title">
                    <p>文书总量</p>
                    <p>{{ }}篇</p>
                </div>
            </div>
            <div class="under-box">
                <li>刑事文书 {{ }}篇</li>
                <li>执行文书 {{ }}篇</li>
            </div>
        </div>
        <div class="box">
            <div class="top-box">
                <img src="@/assets/img/p3.png">
                <div class="title">
                    <p>访问总量</p>
                    <p>{{  }}次</p>
                </div>
            </div>
            <div class="under-box">
                <li>行政文书 {{ }}篇</li>
                <li>其他文书 {{ }}篇</li>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="scss">
.container{
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.box{
    color: red;
    .top-box{
        font-size: 20px;
    }
}

.top-box{
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.top-box img {
    width: 110px;
    /* 设置图片宽度 */
    height: 110px;
    /* 设置图片高度 */
}
.title {
    text-align: center;
    margin-left: 10px;
    display: block;
}
.under-box {
    font-size: 18px;
    padding-left: 30%;
    color: black
}
</style>
